<template>
    <div class="height_100 flexbox vd_bg np_pd">
        <template v-if="type==1">
            <LeftData ref="left_ref" :src="src" :count="count" :isShow="isShow" @playNextVideo="playNextVideo" />
            <RightData :countData="countData" :list="list" />
        </template>
        <DwidthData :src="src" :list="list" ref="left_ref" :countData="countData" :count="count" :isShow="isShow" @playNextVideo="playNextVideo" v-else />
    </div>
</template>

<script>
import LeftData from "./model/LeftData";
import RightData from "./model/RightData";
import DwidthData from "./model/DwidthData";
export default {
    components: {
        LeftData,
        RightData,
        DwidthData,
    },
    name: "",
    data() {
        return {
            screenWidth: document.documentElement.clientWidth,
            loading: false,
            src: "",
            countData: {
                material_id: "",
                material_name: "",
                stat_cost: "",
                pay_order_amount: "",
                pay_order_roi: "",
                convert_cost: "",
                show_cnt: "",
                click_cnt: "",
                convert_cnt: "",
                ad_id_count: "",
                count: null,
                index: null,
            },
            list: [],
            timer: null,
            count: 10,
            isShow: false,
            type: 1,
            link_url: "http://morphlingv4.jcmasz.com/",
            link_url2: "http://morphlingv4.ilzy.cn/",
        };
    },
    created() {
        var that = this;
        window.addEventListener("resize", function () {
            that.screenWidth = document.body.offsetWidth;
        });
        document.getElementsByTagName("html")[0].style.fontSize =
            this.screenWidth / 20 + "px";
        this.getDataList();
        // this.$nextTick(()=>{
        //     const videos = this.$refs.videos;
        //     videos.src = require('G://JC_滴露_地板清洁剂_PT_SR_QF_千川短视频_19727_0410.mp4')
        // })
        // this.$refs.videos.src = video1;
    },
    mounted() {},
    watch: {
        screenWidth: function (val) {
            document.getElementsByTagName("html")[0].style.fontSize =
                val / 20 + "px";
        },
    },
    beforeDestroy() {
        document.getElementsByTagName("html")[0].style.fontSize = "unset";
        clearInterval(this.timer);
    },
    methods: {
        //获取数据
        async getDataList() {
            this.count = 10;
            let p_link = window.location.protocol;
            let link_url = p_link + "//morphlingv4.jcmasz.com/";
            console.log(link_url);
            const { data: res } = await this.$http.post(
                this.link_url + "openapi/material/materialListQc"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                if (res.data.width / res.data.height == 0.5625) {
                    this.type = 1;
                } else {
                    this.type = 2;
                }
                this.src = res.data.material_localcdn;
                this.countData.material_id = res.data.material_id;
                this.countData.material_name = res.data.material_name;
                this.countData.stat_cost = res.data.stat_cost;
                this.countData.pay_order_amount = res.data.pay_order_amount;
                this.countData.pay_order_roi = res.data.pay_order_roi;
                this.countData.convert_cost = res.data.convert_cost;
                this.countData.show_cnt = res.data.show_cnt;
                this.countData.click_cnt = res.data.click_cnt;
                this.countData.convert_cnt = res.data.convert_cnt;
                this.countData.ad_id_count = res.data.ad_id_count;
                this.countData.count = res.data.count;
                this.countData.index = res.data.index;
                this.list = res.data.list
                this.$refs.left_ref.getData();
            }
        },

        playNextVideo() {
            let that = this;
            that.isShow = true;
            that.timer = setInterval(() => {
                if (that.count == 0) {
                    clearInterval(that.timer);
                    that.isShow = false;
                    that.getDataList();
                } else {
                    that.count--;
                }
            }, 1000);
            // setTimeout(() => {
            //     that.getDataList();
            // }, 1000);
        },
    },
};
</script>


<style scoped>
.vd_bg {
    background-color: #08101c;
    box-sizing: border-box;
    padding: 0.2rem;
}
</style>


